<template>
  <div>
    <el-container>

      <div style="background: #545c64;">
        <el-aside width="200px" style="background: #545c64;height: 100vh;">
          <img src="../assets/logo.png" style="height: 40px; margin: 8px;" />
          <el-menu router :default-active="path" background-color="#545c64" text-color="#fff"
            active-text-color="#ffd04b">
            <el-menu-item index="/index">
              <i class="el-icon-house"></i>
              <span slot="title">首页</span>
            </el-menu-item>
            <el-menu-item index="/public">
              <i class="el-icon-reading"></i>
              <span slot="title">公共库</span>
            </el-menu-item>
            <el-menu-item index="/run">
              <i class="el-icon-refresh"></i>
              <span slot="title">流转库</span>
            </el-menu-item>
            <el-menu-item index="/staffManage">
              <i class="el-icon-user"></i>
              <span slot="title">员工管理</span>
            </el-menu-item>
            <el-menu-item index="/department">
              <i class="el-icon-medal"></i>
              <span slot="title">部门管理</span>
            </el-menu-item>
            <el-menu-item index="/log">
              <i class="el-icon-view"></i>
              <span slot="title">日志</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
      </div>
      <el-container>
        <el-header style='text-align: right;'>
          <el-dropdown @command="dropdown">
            <i class="el-icon-setting" style="color: #fff;"></i>
            <el-dropdown-menu slot="dropdown" >
              <el-dropdown-item command='back'>退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>{{info.realname}}</span>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  export default {
    name: 'side',
    data() {
      return {
        path: '',
        info: {}
      }
    },
    computed: {
      route() {
        return this.$route.path;
      }
    },
    created() {
      this.information()
    },
    watch: {
      route: {
        immediate: true,
        handler(v) {
          if (v) {
            this.path = v;
          }
        }
      }
    },
    methods: {
      information() {
        this.axios.post("/user/information", {}).then(res => {
          this.info = res
        })
      },
      dropdown(e){
        if(e=='back'){
           window.localStorage.removeItem('userInfo')
           this.$router.replace('/login')
        }
      }
    }
  }
</script>

<style>
  .el-menu {
    border: 0;
  }

  .el-header,
  .el-footer {
    background-color: #545c64;
    color: #fff;
    line-height: 60px;
  }
</style>
